<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="mr-5">设备 /</span>
          <span class="mr-15"> 传感器列表 </span>
          <span class="f12">
            -
            展示EUI、名称、状态、数据类型等设备信息，可根据EUI、群组、状态、绑定时间等条件筛选具体的传感器节点，并提供移动群组等功能。</span
          >
        </div>
      </template>
    </el-card>
    <!-- tabs栏 -->
    <Tab @chang-tab="changtabbb" />
    <!-- Search搜索 -->
    <Search @search="searchMethods" ref="search" :total="total" />

    <div>
      <el-radio-group v-model="labelPosition" label="position control">
      </el-radio-group>
    </div>
    <el-table :data="sensorList" style="width: 100%">
      <el-table-column align="center" prop="eui" label="EUI" width="150" />
      <el-table-column
        align="center"
        prop="name"
        label="设备名称"
        width="180"
      />
      <el-table-column align="center" prop="nums" label="传感器通道" />
      <el-table-column align="center" prop="devGroup" label="设备群组" />
      <el-table-column align="center" prop="loop" label="上报周期(分钟)" />
      <el-table-column align="center" prop="mhz" label="频率(MHz)" />
      <el-table-column
        align="center"
        prop="online"
        label="在线状态"
        :formatter="
          (row) => {
            return fonline(row, 'sensor');
          }
        "
      />
      <el-table-column
        align="center"
        prop="bTime"
        label="绑定时间"
        :formatter="fcTime"
      />
      <el-table-column align="center" prop="" label="操作" />
    </el-table>
    <!--分页 -->
    <div class="flex jc-c mt-20">
      <el-pagination
        :current-page="currPage"
        @current-change="changePage"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
      />
    </div>
  </div>
</template>


<script setup>
import { reactive, ref, onMounted, inject } from "vue";
import * as api from "../../api/index";
import Tab from "./sensor/Tab.vue";
import Search from "./sensor/Search.vue";
//转换中文
// const utils = inject("utils");
const { fcTime, fonline } = inject("utils");

const online = ref("");
//分页相关
const total = ref(0);
const pageSize = ref(5);
const eui = ref("");
//当前页
const currPage = ref(1);
//切换tab栏协议(用作切换tab栏)
const agreement = ref("all");
//切换分页
const changePage = (newPage) => {
  currPage.value = newPage;
  // console.log("213", newPage);
  getDeviceSen();
};
//切換teb栏
const changtabbb = (tabname) => {
  console.log("tabname", tabname);
  //修改参数
  agreement.value = tabname;
  currPage.value = 1;
  //重新请求数据

  getDeviceSen();
  search.value.sizeForm.eui = "";
};
//搜索
const searchMethods = (data) => {
  console.log("data000", data);
  eui.value = data.eui;
  currPage.value = 1;
  // data.eui = ''
  getDeviceSen();
};
//点击tab栏清空搜索功能
const search = ref();
console.log(1111111, search);

const size = ref("default");
const labelPosition = ref("right");

//ui库
const sizeForm = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

//数据+渲染
const sensorList = ref([{}]);
//请求数据
const getDeviceSen = () => {
  let data = {
    pageSize: pageSize.value,
    currPage: currPage.value,
    agreement: agreement.value,
    eui: eui.value,
    online: search.value.sizeForm.online,
    date: search.value.sizeForm.date,
  };
  api.$sensorList(data).then((res) => {
    // console.log(res);
    sensorList.value = res.data; //列表
    total.value = res.total;
  });
};

onMounted(() => {
  getDeviceSen();
});
</script>

<style scoped>
.el-radio-group {
  margin-right: 12px;
}
.el-input__wrapper {
  width: 170px;
}

.card-header {
  display: flex;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.border-card {
  width: 100%;
}
.el-card__body {
  padding: 5px;
  background-color: #efeef2;
}
</style> 